<template>
  <div id="PrePlan">
    <!-- style="position: sticky; z-index: 99; width: 1200px; top: 45px; left: 0" -->
    <div>
      <div
        style="padding: 20px 0; background: #fff"
        :class="isXiDingShow ? 'xidingselect' : ''"
      >
        <el-select
          no-data-text="暂无数据"
          @change="provinceChange"
          v-model="prePlanSelectData.selecttextDX6"
          placeholder=" "
          style="width: 90px; margin: 0 10px"
        >
          <el-option
            v-for="item in prePlanSelectData.popArrDX6"
            :key="item.provinceCode"
            :label="item.provinceName"
            :value="item.provinceCode"
          />
        </el-select>

        <!-- 年份 -->
        <el-select
          no-data-text="暂无数据"
          placeholder=" "
          v-model="prePreData.prePlanSelecttextDX6"
          @change="yearChange"
          style="width: 90px"
        >
          <el-option
            v-for="item in prePreData.prePlanPopArrDX6"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <!-- <div class="cata-title f12">
        所属目录：<span v-show="parentListName">{{ parentListName }}></span>
        <span>{{ domTitle }}</span>
      </div> -->
      <div
        class="pre-tr pre-head-tr text-center fw600 f14 pre-gaokao"
        :class="isXiDingShow ? 'xidingtable-title' : ''"
        style="
          display: flex;
          align-items: center;
          color: #86909c !important;
          border-left: 1px solid #ebeef5;
          border-top: 1px solid #ebeef5;
          border-bottom: 1px solid #ebeef5;
        "
      >
        <div class="pre-td pre-td-code nborderbo">代码</div>
        <div class="pre-td pre-td-name nborderbo">院校/专业名称</div>
        <div class="pre-td pre-td-plan nborderbo">计划</div>
        <div class="pre-td pre-td-cose nborderbo">学费</div>
        <div class="pre-td pre-td-year nborderbo">学制</div>
        <div class="pre-td pre-td-choosesubject nborderbo">选科</div>
      </div>
    </div>

    <!-- 悬浮动态title -->
    <div
      v-show="isShow"
      class="f12 font-weight-bold aaaa"
      style="
        display: flex;
        align-items: normal;
        background: rgb(250, 250, 250);
        height: 48px;
        width: 860px;
        position: fixed;
        top: 241px;
      "
    >
      <div class="pre-td pre-td-code flex-center">
        <div>{{ number || '-' }}</div>
      </div>

      <div
        class="pre-td pre-td-name"
        style="
          display: flex;
          flex-direction: column-reverse;
          justify-content: center;
        "
      >
        <div class="f14">{{ school || '-' }}</div>
      </div>

      <div class="pre-td pre-td-plan flex-center">
        <!-- <div>{{ item.collegeName }}</div> -->
        <div class="">{{ number2 || '-' }}</div>
      </div>

      <div
        @click="handleLineTitle"
        class="pre-td pre-td-text text-center fw600 f12 pt40 pb40 flex-center"
      >
        <img src="../../assets/images/tiqianpi-search-flag.png" alt="" />
        <a style="text-decoration: underline"> 历年分数 </a>
      </div>

      <div class="pre-td pre-td-plan flex-center">
        <!-- <div>{{ item.collegeName }}</div> -->
        <div class="">-</div>
      </div>
    </div>

    <!-- list -->
    <div class="list-contaier f12" v-if="prePlanList.length">
      <div
        v-for="(item, index) in prePlanList"
        :key="item.tb_id"
        :class="'title' + index"
      >
        <!-- 标题 -->
        <div
          id="L"
          class="pre-td pre-td-title text-center text-666 f18 fw600"
          v-if="item.dataType == 'U'"
        >
          <div class="cntext">{{ item.title || '-' }}</div>
        </div>
        <!-- 大学 -->
        <div
          v-if="item.dataType == 'U'"
          id="U"
          class="df f12 font-weight-bold"
          style="
            align-items: normal;
            background: rgb(250, 250, 250);
            height: 98px;
          "
        >
          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.collegeEnrollCode || '-' }}</div>
          </div>

          <div
            class="pre-td pre-td-name"
            style="
              display: flex;
              flex-direction: column-reverse;
              justify-content: center;
            "
          >
            <div class="f12" style="color: #999">{{ item.remark || '-' }}</div>
            <div class="f14">{{ item.collegeName || '-' }}</div>
          </div>

          <div class="pre-td pre-td-plan flex-center">
            <!-- <div>{{ item.collegeName }}</div> -->
            <div class="">{{ item.planNum || '-' }}</div>
          </div>

          <div
            class="pre-td pre-td-text text-center fw600 f12 pt40 pb40 flex-center"
          >
            <img src="../../assets/images/tiqianpi-search-flag.png" alt="" />
            <a
              style="text-decoration: underline"
              @click="handleLinianLine(item)"
            >
              历年分数
            </a>
          </div>

          <div class="pre-td pre-td-plan flex-center">
            <!-- <div>{{ item.collegeName }}</div> -->
            <div class="">
              {{ item.chooseSubject || '-' }}
            </div>
          </div>
        </div>
        <!-- 专业 -->
        <div
          v-if="item.dataType == 'M'"
          class="df f12 font-weight-bold"
          style="align-items: normal"
        >
          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.professionEnrollCode || '-' }}</div>
          </div>

          <div
            class="pre-td pre-td-name"
            style="display: flex; flex-direction: column-reverse"
          >
            <div class="f12" style="color: #999">{{ item.remark || '-' }}</div>
            <div class="f14" style="margin-bottom: 10px">
              {{ item.majorName || '-' }}
            </div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.planNum || '-' }}</div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.cost || '-' }}</div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.learnYearText || '-' }}</div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.chooseSubject || '-' }}</div>
          </div>
        </div>
        <!-- 信息 -->
        <div class="tiqianpi-i-view" v-else-if="item.dataType == 'I'">
          <div style="margin: 20px 0 0 10px">{{ item.title || '-' }}</div>
        </div>
      </div>
    </div>
    <div v-else class="nodata">暂无数据</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import bus from '@/utils/bus';

const emits = defineEmits(['updatePrePlanYear', 'updatePrePlanProvince']);
const props = defineProps({
  prePlanList: {
    type: Array,
    default: () => [],
  },
  prePreData: {
    type: Object,
    default: () => {},
  },
  prePlanSelectData: {
    type: Object,
    default: () => {},
  },
  isXiDingShow: {
    type: Boolean,
    default: () => false,
  },
});
watch(() => props.isXiDingShow);
const number = ref(0);
const school = ref('');
const number2 = ref('');

const yearChange = (val) => {
  emits('updatePrePlanYear', val);
};
const handleLinianLine = (item) => {
  let mydata = {
    isShow: true,
    type: '3',
    data: item,
    checkType: '1',
  };
  bus.emit('handleCollegeDetails', mydata);
};
const handleLineTitle = () => {
  let myData = {
    isShow: true,
    type: '3',
    data: {
      collegeCode: number.value,
    },
    checkType: '1',
  };
  bus.emit('handleCollegeDetails', myData);
};
const isShow = ref(false);

const provinceChange = (val) => {
  emits('updatePrePlanProvince', val);
};
</script>

<style lang="scss" scoped>
.xidingselect {
  position: fixed;
  width: 100%;
  background-color: #fff;
  top: 120px;
  z-index: 999;
}

.xidingtable-title {
  margin-top: 80px;
}

.list-contaier {
  border: 1px solid #e8e8e8;
  // margin-top: 109px;
  //padding-bottom: 150px;
  // width: 1200px !important;
}

.cata-title {
  padding: 5px 12px;
  border-bottom: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  background: #fff;
}

.pre-head-tr {
  background: #fff;
  // border-left: 1px solid #ebeef5;
  color: #86909c !important;
}

.pre-tr {
  font-size: 14px;
  display: flex;
  // border-right: 1px solid #ebeef5;
}

.pre-td {
  // padding: 8px 5px;
  padding: 10px 5px 10px 10px;
  min-height: 36px;
  border: none;
  // border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}

.pre-td-code {
  width: 10%;
}

.pre-td-choose,
.pre-td-cose,
.pre-td-plan,
.pre-td-year {
  width: 10%;
}

.pre-td-choosesubject {
  width: 10%;
}

.pre-td-name {
  width: 50%;
}

.pre-td-title {
  width: 100%;
  padding: 11px 5px;
}

.flex-center,
.flex-column-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pre-td-text {
  width: 20%;
}

img {
  width: 15px;
  margin-right: 5px;
}

/* 信息 */
.tiqianpi-i-view {
  background-color: white;
  color: #666666;
  // font-size: 24px;
  font-weight: 400;
}

// .title1{
//   position: sticky;
//   top: 100px;
//   left: 0;
// }
.nborderbo {
  border-bottom: none !important;
}

::v-deep(.el-input-group__append) {
  width: 70px;
  background: var(--background-color);
  color: #fff;
}

.nodata {
  margin-top: 200px;
  text-align: center;
  // width: 860px;
  font-size: 14px;
  color: #666666;
}
</style>
